<template>
  <div style="width:100%" class="carddPage">
    <el-form :inline="true" :model="dataForm">
      <div>
        <!-- <el-form-item label="所属类目：">
          <el-radio-group v-model="radio1">
            <el-radio-button label="闸机"></el-radio-button>
            <el-radio-button label="人脸识别立柱"></el-radio-button>
          </el-radio-group>
        </el-form-item>
        <br />-->
        <!-- <el-form-item label="设备状态：">
          <el-radio-group v-model="dataForm.status">
            <el-radio-button label="2">已连接</el-radio-button>
            <el-radio-button label="1">已断开</el-radio-button>
            <el-radio-button label>全部</el-radio-button>
          </el-radio-group>
        </el-form-item>-->
        <el-form-item label="名称">
          <el-input placeholder="名称" v-model="dataForm.name" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getPageData()">查询</el-button>
        </el-form-item>
        <br />
        <el-form-item v-if="isAuth('sys:gate:add')">
          <el-button type="primary" @click="addposi('','0')">新增</el-button>
        </el-form-item>
      </div>
    </el-form>
    <div>
      <el-collapse v-model="activeNames">
        <el-collapse-item title="车辆闸机" name="1">
          <el-row :gutter="12">
            <el-col
              :span="6"
              v-for="item in gateList"
              :key="item.id"
              v-if="item.type=='0'"
              style="margin-bottom:10px"
            >
              <el-card class="box-card" :body-style="{ padding: '0px' }">
                <el-row :gutter="12">
                  <el-col :span="6">
                    <img
                      style="width:80% ;margin:40% auto 0;    display: block;"
                      src="@/assets/img/zhaji.png"
                    />
                  </el-col>
                  <el-col :span="18">
                    <el-form :inline="true" style="padding:10px">
                      <el-form-item label="名称" style="margin-bottom:5px">
                        <el-input placeholder="名称" :value="item.name" clearable></el-input>
                      </el-form-item>
                      <el-form-item label="编号" style="margin-bottom:5px">
                        <el-input placeholder="编号" :value="item.deviceNo" clearable></el-input>
                      </el-form-item>

                      <el-form-item label="权限" style="margin-bottom:0">
                        <el-input
                          :readonly="true"
                          placeholder="点击选择"
                          class="menu-list__input"
                          @focus="getAuthList(item.id)"
                        ></el-input>
                        <!-- <el-input placeholder="已连接" :value="item.status=='1'?'已连接':'已断开'" clearable></el-input> -->
                      </el-form-item>
                    </el-form>
                  </el-col>
                </el-row>
                <div
                  class="bottom clearfix"
                  style="display:flex;background:rgba(247,249,250,1);height:45px"
                  v-if="isAuth('sys:gate:add')||isAuth('sys:gate:add')"
                >
                  <el-button
                    v-if="isAuth('sys:gate:add')"
                    type="text"
                    class="button"
                    style="flex:1"
                    @click="addposi(item,'0')"
                  >设置</el-button>
                  <el-button
                    v-if="isAuth('sys:gate:del')"
                    type="text"
                    class="button"
                    style="flex:1"
                    @click="delPost(item.id)"
                  >删除</el-button>
                  <el-button
                    v-if="isAuth('sys:gate:del')"
                    type="text"
                    class="button"
                    style="flex:1"
                    @click="lookDetail(item.id,'0')"
                  >查看</el-button>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item title="人脸识别" name="2">
          <el-row :gutter="12">
            <el-col
              :span="6"
              v-for="item in gateList"
              :key="item.id"
              v-if="item.type=='1'"
              style="margin-bottom:10px"
            >
              <el-card class="box-card" :body-style="{ padding: '0px' }">
                <el-row :gutter="12">
                  <el-col :span="6">
                    <img
                      style="width:80% ;margin:40% auto 0;    display: block;"
                      src="@/assets/img/timg.jpg"
                    />
                  </el-col>
                  <el-col :span="18">
                    <el-form :inline="true" style="padding:10px">
                      <el-form-item label="名称" style="margin-bottom:5px">
                        <el-input placeholder="名称" :value="item.name" clearable></el-input>
                      </el-form-item>
                      <el-form-item label="编号" style="margin-bottom:5px">
                        <el-input placeholder="编号" :value="item.deviceNo" clearable></el-input>
                      </el-form-item>

                      <el-form-item label="权限" style="margin-bottom:0">
                        <el-input
                          :readonly="true"
                          placeholder="点击选择"
                          class="menu-list__input"
                          @focus="getAuthList(item.id,'2')"
                        ></el-input>
                        <!-- <el-input placeholder="已连接" :value="item.status=='1'?'已连接':'已断开'" clearable></el-input> -->
                      </el-form-item>
                    </el-form>
                  </el-col>
                </el-row>
                <div
                  class="bottom clearfix"
                  style="display:flex;background:rgba(247,249,250,1);height:45px"
                  v-if="isAuth('sys:gate:add')||isAuth('sys:gate:add')"
                >
                  <el-button
                    v-if="isAuth('sys:gate:add')"
                    type="text"
                    class="button"
                    style="flex:1"
                    @click="addposi(item,'0')"
                  >设置</el-button>
                  <el-button
                    v-if="isAuth('sys:gate:del')"
                    type="text"
                    class="button"
                    style="flex:1"
                    @click="delPost(item.id)"
                  >删除</el-button>
                  <el-button
                    v-if="isAuth('sys:gate:del')"
                    type="text"
                    class="button"
                    style="flex:1"
                    @click="lookDetail(item.id,'1')"
                  >查看</el-button>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item title="刷卡机" name="3">
          <el-row :gutter="12">
            <el-col
              :span="6"
              v-for="item in gateList"
              :key="item.id"
              v-if="item.type=='3'"
              style="margin-bottom:10px"
            >
              <el-card class="box-card" :body-style="{ padding: '0px' }">
                <el-row :gutter="12">
                  <el-col :span="6">
                    <img
                      style="width:80% ;margin:40% auto 0;    display: block;"
                      src="@/assets/img/card.jpg"
                    />
                  </el-col>
                  <el-col :span="18">
                    <el-form :inline="true" style="padding:10px">
                      <el-form-item label="名称" style="margin-bottom:5px">
                        <el-input placeholder="名称" :value="item.name" clearable></el-input>
                      </el-form-item>
                      <el-form-item label="编号" style="margin-bottom:5px">
                        <el-input placeholder="编号" :value="item.deviceNo" clearable></el-input>
                      </el-form-item>

                      <el-form-item label="权限" style="margin-bottom:0">
                        <el-input
                          :readonly="true"
                          placeholder="点击选择"
                          class="menu-list__input"
                          @focus="getAuthList(item.id,'2')"
                        ></el-input>

                        <!-- <el-input placeholder="已连接" :value="item.status=='1'?'已连接':'已断开'" clearable></el-input> -->
                      </el-form-item>
                    </el-form>
                  </el-col>
                </el-row>
                <div
                  class="bottom clearfix"
                  style="display:flex;background:rgba(247,249,250,1);height:45px"
                  v-if="isAuth('sys:gate:add')||isAuth('sys:gate:add')"
                >
                  <el-button
                    v-if="isAuth('sys:gate:add')"
                    type="text"
                    class="button"
                    style="flex:1"
                    @click="addposi(item,'0')"
                  >设置</el-button>
                  <el-button
                    v-if="isAuth('sys:gate:del')"
                    type="text"
                    class="button"
                    style="flex:1"
                    @click="delPost(item.id)"
                  >删除</el-button>
                  <el-button
                    v-if="isAuth('sys:gate:del')"
                    type="text"
                    class="button"
                    style="flex:1"
                    @click="lookDetail(item.id,'3')"
                  >查看</el-button>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
      <!-- 车辆闸机 --0 -->
      <!-- 人脸识别 1 -->
      <!-- 刷卡机 3 -->

      <el-popover ref="menuListPopover" placement="bottom-start" trigger="click"></el-popover>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <el-tree
        :data="menuList"
        :props="menuListTreeProps"
        ref="menuListTree"
        show-checkbox
        node-key="value"
        :highlight-current="true"
        :expand-on-click-node="false"
      ></el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sureAuthList()">确 定</el-button>
      </span>
    </el-dialog>
    <GateUpdate v-if="addOrUpdatePosiVisible" ref="addOrUpdatePosi" @refreshDataList="getPageData"></GateUpdate>
  </div>
</template>

<script>
import GateUpdate from "./gateUpdate";

import { getAllKey } from "@/utils";

export default {
  components: { GateUpdate },
  data() {
    return {
      addOrUpdatePosiVisible: false,
      gateList: [],
      menuList: [],
      userType: "",
      activeNames: ["1"],
      dialogVisible: false,
      menuListTreeProps: {
        children: "children",
        label: "lable"
      },
      dataForm: {
        name: "",
        status: ""
      },
      radio1: "闸机",
      radio2: "已连接",
      mid: ""
    };
  },
  created() {
    this.getPageData();
  },
  methods: {
    addposi(item, type) {
      this.addOrUpdatePosiVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdatePosi.init(item, type);
      });
    },
    getAuthList(id, type) {
      let url = "/org/getCarList";
      this.userType = "";
      if (type == "2") {
        url = "/org/getemlist";
        this.userType = type;
      }
      this.mid = id;
      this.$http({
        url: this.$http.adornUrl(url),
        method: "POST",
        data: this.$http.adornData({ gateId: id })
      }).then(({ data }) => {
        this.dialogVisible = true;
        this.menuList = data.list;
        console.log(getAllKey(data.list, "value", "children"));
        setTimeout(() => {
          this.$refs.menuListTree.setCheckedKeys(
            getAllKey(data.list, "value", "children"),
            true
          );
        }, 500);
      });
    },
    lookDetail(id, type) {
      this.$router.push({ path: "/themesd", query: { id: id, type: type } });
    },
    sureAuthList() {
      let addNodes = this.$refs.menuListTree.getCheckedNodes();
      let checkUserNodes = addNodes.filter(item => item.type == "2");
      let nodesArry = checkUserNodes.map(item => item.value);
      console.log(nodesArry);

      let url = "car/zhuce";
      if (this.userType == "2") {
        url = "employee/zhuceByMid";
      }
      this.$http({
        url: this.$http.adornUrl(url),
        method: "POST",
        data: this.$http.adornData({
          eids: nodesArry.join(","),
          cids: nodesArry.join(","),
          mid: this.mid
        })
      }).then(({ data }) => {
        if (data.code == 0) {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 800,
            onClose: () => {
              this.dialogVisible = false;
            }
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    getPageData() {
      this.$http({
        url: this.$http.adornUrl("/sys/gate/getAllGateList"),
        method: "POST",
        params: this.$http.adornParams({ data: this.dataForm })
      }).then(({ data }) => {
        this.gateList = data.list;
      });
    },
    delPost(id) {
      this.$http({
        url: this.$http.adornUrl("/sys/gate/deleteGateStatus"),
        method: "POST",
        params: this.$http.adornParams({ id: id })
      }).then(({ data }) => {
        if (data.code == 0) {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 800,
            onClose: () => {
              this.getPageData();
            }
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    }
  }
};
</script>

<style>
.bottom button.button {
  text-align: center;
  margin-left: 0;
}
.button {
  border-right: 1px solid #e6e6e6;
  color: #666666;
  font-size: 13px;
}
.bottom button.button:last-child {
  border-right: none;
}
.carddPage .el-collapse-item__header {
  background-color: #f2f2f2;
  margin-top: 5px;
  padding-left: 10px;
  font-weight: 600;
}
</style>